<template>
  <div class="sidebar-layers">
    <ul>
      <li
        v-for="(item, key) in comList"
        :key="key"
        class="flex justify-between px-4 cursor-pointer items-center"
        :class="{ active: selectSet.has(item.id) }"
        @mousedown="selectItem(item)"
        @mouseenter="item.showIcon = true"
        @mouseleave="item.showIcon = false"
      >
        <div>{{ item.type }}-{{ item.z }}</div>
        <div v-show="item.showIcon" class="flex items-center gap-x-4">
          <ArrowUpOutlined
            :v-show="getMaxIndex() !== item.z"
            @click="moveUp(item.z)"
          ></ArrowUpOutlined>
          <DownOutlined @click="moveDown(item.z)"></DownOutlined>

          <EyeOutlined @click="toggleById(item.id)"></EyeOutlined>
          <XConfirm @click="deleteShapeById(item.id)">
            <DeleteOutlined />
          </XConfirm>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import type { ArrowUpOutlined } from '@ant-design/icons-vue';
import { addIdInSet, selectSet } from '../../data/shapes';
import { currentStage } from '../../data/stage';
import {
  deleteShapeById,
  getMaxIndex,
  moveDown,
  moveUp,
  toggleById,
} from '../../event/shape.actions';
import type { IShapeProps } from '../../types/IShape';

/* 从外部引入  */

/**
 * 注释: 选择图层时触发，点击需要激活对应的组件
 *
 * */
type ShapeConfigType = IShapeProps & { [key: string]: any };
const selectItem = (item: ShapeConfigType) => {
  addIdInSet(item);
};

const comList = computed(() => {
  return currentStage.value.components;
});
</script>

<style lang="scss" scoped>
.sidebar-layers {
  ul {
    height: calc(100vh - 72px);
    overflow-y: auto;
  }
  li {
    line-height: 32px;
    border: 1px solid transparent;
    margin-bottom: 1px;

    &:hover {
      border: 1px solid var(--primary);
    }
  }
  li.active {
    border: 1px solid transparent;
  }
}
</style>
